// 设置变量，修改样式

:root {
    // Light Theme
    --background-color: #eff1f7;
    --text-color: #333333;
    --header-background-color: #eff1f7; // 表头背景
    --table-background-color: #ffffff; // 表格背景
    --button-background: red; // 默认浅色主题按钮背景
    --button-text: blue; // 默认浅色主题按钮文本
    --el-checkbox-bg-color: green !important;
}

// Dark Theme
[data-theme="dark"] {
    --background-color: #2c2c43;
    --text-color: #cccccc;
    --header-background-color: #222233;
    --table-background-color: #2c2c43;


    --button-background: #555555; // 暗色主题按钮背景
    --button-text: #ffffff; // 暗色主题按钮文本
}


.el-checkbox {
    --el-checkbox-checked-bg-color: green;
    --el-checkbox-checked-icon-color: white;
}

.avue-crud__header {
    background-color: var(--background-color);
}

.el-card__body {
    background-color: var(--background-color);
}

.avue-crud__pagination {
    background-color: var(--background-color);
}

.el-table__inner-wrapper {
    background-color: var(--background-color);
    // border: 1px solid red;
}

.el-table__row {
    background-color: var(--table-background-color) !important;
    color: var(--text-color);
    // border: 1px solid red;
}

.avue-crud .el-table th.el-table__cell {
    background-color: var(--header-background-color) !important;
    color: var(--text-color);
    // border: 1px solid red;
}

.el-select__wrapper {
    background-color: var(--header-background-color) !important;
    color: var(--text-color);
}

.el-input__wrapper {
    background-color: var(--header-background-color) !important;
    color: var(--text-color) !important;
}

.el-pagination__total {
    color: var(--text-color) !important;
}

.el-pagination__jump {
    color: var(--text-color) !important;
}

.el-input__inner {
    color: var(--text-color) !important;
}

.btn-next {
    background-color: var(--header-background-color) !important;
}

.btn-prev {
    background-color: var(--header-background-color) !important;
}

.item{
    background-color: var(--header-background-color) !important;
    
}